<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>substr被弃用</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			.page {
				background: purple;
				color: white;
				margin: 20px;
				padding: 20px;
			}

			h2,
			h3,
			p {
				margin: 20px 0;
			}
		</style>
	</head>
	<body>
		<div class="page">
			substr() 已从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但它随时可能被删除，可使用 slice() 作为替代首选方案。

			<h2>
				为什么 substr() 会被废弃？
			</h2>
			<p>
				substr() 被废弃的核心原因在于它的 API 设计存在不一致性和歧义，我们先来看看这三兄弟的用法：
			</p>
			<ul>
				<li>
					slice(startIndex,endIndex)
				</li>
				<li>
					substring(startIndex,endIndex)
				</li>
				<li>
					substr(startIndex,length)
				</li>
			</ul>
			<p>
				slice() 和 substring() 的第二个参数都是结束索引（不包含），而 substr() 的第二个参数却是截取的长度。这种不一致性常常导致开发者混淆，尤其是在快速编码或维护旧代码时，很容易写出错误的逻辑。
			</p>

			<h2>
				新选择：slice() 和 substring()
			</h2>
			<p>
				既然 substr() 不再推荐使用，我们应该转向它的两个兄弟。它们不仅是现行标准，而且功能更强大、行为更可预测。
			</p>
			<h3>
				1. slice(startIndex, endIndex)
			</h3>
			<p>
				slice() 是目前最灵活、最常用的字符串截取方法：
			</p>
			<p>
				const str = 'javascript'
				<br>
				//基本用法
				<br>
				console.log(str.slice(0,4)) //'java'
				<br>
				// 省略 endIndex，会截取到字符串末尾
				<br>
				console.log(str.slice(4));     // "script"
				<br>
				// 使用负数索引（超级好用！）
				<br>
				console.log(str.slice(-6));    // "script" (从倒数第 6 个字符开始)
				<br>
				console.log(str.slice(0, -6)); // "java" (从头开始，到倒数第 6 个字符结束)
			</p>

			<h3>
				2. substring(startIndex, endIndex)
			</h3>
			<p>
				substring() 与 slice() 非常相似，但如果 startIndex 大于 endIndex，它会自动交换两个参数的位置。
			</p>
			<p>
				const str = "JavaScript";
				<br>
				// 基本用法
				<br>
				console.log(str.substring(0, 4)); // "Java"
				<br>
				// start > end，自动交换位置
				<br>
				console.log(str.substring(4, 0)); // "Java" (等同于 substring(0, 4))
				<br>
				// 负数参数被视为 0
				<br>
				console.log(str.substring(-5, 4)); // "Java" (等同于 substring(0, 4))
			</p>

			<p>
				由于 substring() 的自动交换和处理负数的行为有时会让人困惑，通常我们更推荐使用 slice()，因为它的行为更加严格和可预测。代码不仅是用来执行的，更是用来阅读和维护的。放弃 substr()，拥抱 slice() 和 substring()，不仅仅是跟上技术潮流，更是为了编写出更清晰、更健壮、更易于他人理解的代码。
			</p>
		</div>
		<script>
			const str = 'javascript'
			console.log(str.slice(0, 4))
			console.log(str.slice(4));
			console.log(str.slice(-6));
			console.log(str.slice(0, -6));
		</script>
	</body>
</html>
